import base from "../base.js"
import cinemasApi from "../../api/cinemas.js"

export default class extends base {

    data = {
        curPage: 1,//当前页
        eachPage: 10,
        total: 0,
        maxPage: 0,
        rows: [],
    }

    constructor({ el }) {
        super({ el })
    }

    addDate = {

    }

    render() {
        this.$el.html(
            `
            <h1 style="margin:20px auto;width:140px;font-weight:bold;">影院列表</h1>
           <div>
                
           <div>
           <form style="display:flex;margin:auto;width: 683px;" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="padding: 9px 0;">地区</label>
                    <div class="layui-input-block">
                        <select name="cinemasIdFind" lay-verify="required" lay-filter="cinema">
                           <option value="">请选择一个区域</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="status">
                    <label class="layui-form-label" style="padding: 9px 0;">营业状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="true" title="营业中" lay-filter="ChoiceRadio">
                        <input type="radio" name="status" value="false" title="未营业" lay-filter="ChoiceRadio">
                    </div>
                </div>
                <div>
                    <div>   
                        <a id="find-btn" class="layui-btn layui-btn-sm">立即查询</a>
                    </div>
                </div>
            </form>
           </div>
           <table border="1" class="layui-table" >
            <thead >
                <tr>
                    <th style="width:50px;">序号</th>
                    <th>影院名称</th>
                    <th>影院地址</th>
                    <th>影院联系方式</th>
                    <th style="width: 138px;text-align:center;">影院是否营业</th>
                    <th style="width: 138px;">操作</th>
                </tr>
            </thead>
          <tbody class="cinemasList"></tbody>
          </table>  
          </div>
          <form class="layui-form" width="100" style="font-size:10px;">
                <div class="layui-form-item" style="display:inline-block;width:150px;">
                    <label id="cinemaId" class="layui-form-label">当前页</label>
                    <div class="layui-input-block" style="margin-left: 80px;">
                        <select id="curPage" lay-verify="required"></select>
                    </div>
                </div>
                每页显示条数：<input type="text" name="eachPage" value="${this.data.eachPage}" style="width:25px">
                总条数：<span id="total"></span>
            </form>
          <div style="margin:auto;width:210px;">
            <button id="first-btu"class="layui-btn layui-btn-sm">首页</button>    
            <button id="prev-btu" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-left layui-font-12"></i>
            </button>
            <button id="next-btu" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-right layui-font-12"></i>
            </button>
            <button id="last-btu" class="layui-btn layui-btn-sm">尾页</button>
          </div> `
        );
        const form = layui.form;
        form.render();
        // 获取tbody节点
        this.$cinemesELe = $(".cinemasList")
        // 当前页
        this.$curPageEle = $("#curPage");
        // 每页显示条数
        this.$eachPageEle = $("input[name=eachPage]");
        // 总条数
        this.$totalEle = $("#total");
        //  首页
        this.$firstBtuEle = $("#first-btu");
        // 上一页
        this.$prevBtuEle = $("#prev-btu");
        // 下一页
        this.$nextBtuEle = $("#next-btu");
        // 尾页
        this.$lastBtuEle = $("#last-btu");
        // 获取查询按钮
        this.$findBtn = $("#find-btn");
        // 获取下拉列表
        this.$cinemasIdFind = $("select[name=cinemasIdFind]")
        // 禁用查询按钮
        $('#find-btn').addClass("layui-btn-disabled").attr("disabled", true);
    }

    rerender() {
        // 渲染影院
        this.$cinemasIdFind.html(`${this.data.rows.map(item => {
            return `<option value="${item._id}">${item.address}</option>`
        }).join("")
            }`)
        const form = layui.form;
        form.render()
        const str = this.data.rows.map((item, index) => {
            return `
                <tr value="${index}">
                  <td class="${item._id}">${index + 1}</td>
                  <td>${item.name}</td>
                  <td>${item.address}</td>
                  <td>${item.phone}</td>
                  <td>${item.status}</td>
                  <td>
                  <button name="change-Btn" value="${index}" class="layui-btn  layui-btn-sm layui-bg-gray">修改</button>
                  <button name="delete-Btn" value="${index}" class="layui-btn  layui-btn-sm">删除</button>
                  </td>
                </tr>`
        }).join("");  //map方法返回数组，用join转化为字符串
        this.$cinemesELe.html(str);

        //获取修改按钮
        this.$changeBtnEle = $("[name='change-Btn']")
        //获取删除按钮
        this.$deleteBtnEle = $("[name='delete-Btn']")
        // 显示总条数
        this.$totalEle.html(this.data.total);
        // 显示当前页
        let options = "";
        // for循环添加option
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `
            <option value="${i}">${i}</option>
            `;
        }
        // 将添加好的options渲染进当前页的下拉列表
        this.$curPageEle.html(options);
        this.$curPageEle.val(this.data.curPage)
        form.render();
        
        //获取删除节点
        this.$deleteBtn = $('button[name=delete-btn]');

        //添加修改、删除功能
        //绑定修改列表事件
        this.$changeBtnEle.on("click", this.changeCinemas.bind(this));
        //绑定删除事件
        this.$deleteBtnEle.on("click", this.deleteCinemas.bind(this));

    }




    //render方法执行后，执行
    mounted() {
        // 获取数据
        this.getCinemas();
    }

    // 首页
    first() {
        // 判断是否是在第一页
        if (this.data.curPage === 1) return;
        this.data.curPage = 1;
        //重新渲染
        this.getCinemas();
    };
    // 尾页
    last() {
        // 判断是否在最后一页
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getCinemas();
    }
    // 上一页
    prev() {
        // 
        if (this.data.curPage === 1) return;
        this.data.curPage = this.data.curPage - 1;
        this.getCinemas();
    };
    // 下一页
    next() {
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.curPage + 1;
        this.getCinemas();
    };
    // 修改当前页
    setEachPageHadle(e) {
        // e.target.value拿到节点的value值 隐式转换
        this.data.eachPage = ~~e.target.value;
        this.getCinemas();
    };

    //修改表格数据
    changeCinemas(e) {
        const index = e.target.value;
        const _id = $(`tbody>tr:eq(${index})>td:eq(0)`).attr("class");
        const data = { _id }
        Object.assign(this.data, data);
        location.hash = `#/info/changeCinemas/${this.data._id}`
    }

    //删除表格影院数据
    deleteCinemas(e) {
        const index = e.target.value;
        const _id = $(`tbody>tr:eq(${index})>td:eq(0)`).attr("class");
        const data = { _id };
        console.log(_id, data);
        Object.assign(this.data, data);
        cinemasApi.delete(_id)
        layer.msg("删除成功");
        //渲染删除后的表格
        this.getCinemas()

    }

    //获取电影院数据，并调用 rerender方法将数据渲染到页面上
    async getCinemas() {
        const { curPage, eachPage } = this.data;
        //调用接口get方法，请求数据
        const data = await cinemasApi.get({ curPage, eachPage });
        Object.assign(this.data, data);
        //再次渲染
        this.rerender()

    };

    // 电影院select事件监听
    changeHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        // 将this的指向赋值给that
        const that = this;
        // 电影院下拉列表事件监听
        form.on('select(cinema)', async function (e) {
            console.log(e.value);
            const cinemasId = e.value;
            that.addDate["address"] = cinemasId;
            console.log(that.addDate);
            that.btnAble();
        })
    }

    // 单选框监听事件
    radioHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('radio(ChoiceRadio)', function (data) {
            const status = data.value;
            that.addDate["status"] = status;
            that.btnAble();
        });
    }


    // 查询事件
    async findHandle() {
        const { status,address } = this.addDate;
        console.log({ address, status });
        this.data.rows = await cinemasApi.find({ address, status });
        console.log(this.data.rows);
        this.rerender()
    }

    // 按钮解禁
    btnAble() {
        if (this.addDate) {
            $('#find-btn').removeClass("layui-btn-disabled").attr("disabled", false);
        }
    }


    //添加分页、修改、删除功能
    handle() {
        // 查询事件按钮
        this.$findBtn.on("click", this.findHandle.bind(this))
        // 首页 尾页
        this.$firstBtuEle.on("click", this.first.bind(this));
        this.$lastBtuEle.on("click", this.last.bind(this));
        // 上一页下一页
        this.$prevBtuEle.on("click", this.prev.bind(this));
        this.$nextBtuEle.on("click", this.next.bind(this));
        // 修改当前页 当失焦当时候
        this.$eachPageEle.on('blur', this.setEachPageHadle.bind(this))
        // 单选框改变
        this.radioHandel();
        // 下拉列表改变
        this.changeHandel();

    }

}